<template>
  <zm-view ref="view" background="#ffffff">
    <u-image :src="activityInfo.image" width="100%" height="250rpx"></u-image>
    <view class="flex flex-col p-30">
      <text class="font-32 font-bold text-line-1 py-30">{{ activityInfo.activityName }}</text>
      <text v-if="activityInfo.objects" class="font-28 mb-8">活动对象：{{ activityInfo.objects }}</text>
      <text class="font-28">活动区域：{{ activityInfo.areaText }}</text>
      <text class="font-28 mt-8">活动日期：{{ activityInfo.sT | formatDate("YYYY年MM月DD日") }}-{{ activityInfo.eT | formatDate("YYYY年MM月DD日") }}</text>
      <text class="font-28 mt-8">活动时间：{{ activityInfo.actTime }}</text>
      <template v-if="activityInfo.process">
        <text class="font-32 font-bold text-line-1 py-30">活动流程</text>
        <zm-richtext :content="activityInfo.process"></zm-richtext>
      </template>
      <template v-if="activityInfo.rule">
        <text class="font-32 font-bold text-line-1 py-30">活动规则</text>
        <zm-richtext :content="activityInfo.rule"></zm-richtext>
      </template>
    </view>
    <zm-footer safe-area-inset-bottom z-index="100" background="#ffffff">
      <view class="footer-wrap flex items-center justify-between px-30 py-20">
        <u-count-down :time="activityInfo.stockTime * 1000" format="DD:HH:mm:ss" auto-start millisecond @change="onStockTimeChange">
          <view class="flex items-center font-28">
            <text class="time-item">{{ timeData.days > 9 ? timeData.days : "0" + timeData.days }}</text>
            <text class="mx-8">天</text>
            <text class="time-item">{{ timeData.hours > 9 ? timeData.hours : "0" + timeData.hours }}</text>
            <text class="mx-8">:</text>
            <text class="time-item">{{ timeData.minutes }}</text>
            <text class="mx-8">:</text>
            <text class="time-item">{{ timeData.seconds }}</text>
            <text class="mx-8">{{ tStatus }}</text>
          </view>
        </u-count-down>
        <zm-button size="medium" round width="240rpx" :disabled="activityInfo.tStatus !== 'preEnd'" @click="handleClick">立即参与</zm-button>
      </view>
    </zm-footer>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
export default {
  mixins: [page, hook],
  data() {
    return {
      timeData: {},
      activityId: "",
      activityInfo: {}
    }
  },
  computed: {
    tStatus() {
      const { tStatus } = this.activityInfo
      switch (tStatus) {
        case "preStart":
          return "后开始"
        case "preEnd":
          return "后结束"
        case "isEnd":
          return "活动已结束"
        case "isStop":
          return "活动已暂停"
        default:
          return ""
      }
    }
  },
  onLoad(options) {
    this.activityId = options.activityId
    this.handleGetActivityInfo()
  },
  methods: {
    handleClick() {
      const link = this.activityInfo.link
      const type = this.activityInfo.type
      if (type == 1 && link) {
        uni.$setCache("webviewSrc", `${link}&token=${this.token}`)
        this.toView({ url: "pages/utils/webview/webview" })
      } else {
        this.toView({ url: "pages/cinema/cinema-list/cinema-list", params: { activityId: this.activityInfo.activityId } })
      }
    },
    onStockTimeChange(val) {
      this.timeData = val
    },
    async handleGetActivityInfo() {
      this.activityInfo = await uni.$api.activity.getActivityInfo({ activityId: this.activityId })
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-wrap {
  background: #fff;
  border-top: 1rpx solid #eeeeee;
  .time-item {
    color: #ffffff;
    width: 48rpx;
    height: 48rpx;
    display: flex;
    font-size: 28rpx;
    align-items: center;
    border-radius: 8rpx;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
  }
}
</style>
